* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

/* 字体渲染优化 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: #effafc;
  position: relative; /* 创建新的层叠上下文 */
  isolation: isolate; /* 防止z-index受其他元素影响 */
   overflow: hidden; 防止滚动条导致布局偏移
}

:root {
  --base-font: 16px;
  --container-padding: clamp(1rem, 3vw, 2rem); /* 动态padding */
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px; /* 最大宽度限制 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 var(--container-padding);
}

/* 移动端优先（默认样式） */
/* 平板: ≥768px */
@media (min-width: 48em) {
  .container {
    max-width: 768px;
  }
}

/* 小桌面: ≥1024px */
@media (min-width: 64em) {
  .container {
    max-width: 1024px;
  }
}

/* 大桌面: ≥1280px */
@media (min-width: 80em) {
  .container {
    max-width: 1280px;
  }
}
/* 改用动态调整 */

@media (min-width: 1400px) {
  .container {
    max-width: 1400px; /* 适配超宽屏 */
  }
}

/* 超宽屏: ≥1536px */
@media (min-width: 96em) {
  .container {
    max-width: 1536px;
  }
}
